<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="doT.js"></script>
</head>
<body>
<!--内容层-->
<div id="testCont"></div>
<div class="testAdd">增加</div>
<!--内容层-->
<!--模板层-->
<script type="text/x-dot-template" id="testTpl">
    <div>{{= it.msg }}</div>
    <div>{{= it.code }}</div>
</script>
<!--模板层-->	
<!--数据层-->
<script type="text/javascript">
var message = {
    msg: 'Hello world.',
    code: 200
};
/*
以下为替换法，根据现有的模板替换进数据，用于常规页面显示，页面打开后自动加载执行
*/
//使用doT.template(tplText)函数，tplText为数据
var tpl = doT.template($("#testTpl").html());  //获取模板，这里的testTpl对应模板层
var dataT = tpl(message);   //传入数据获取实际需要的数据
$("#testCont").html(dataT);   //将数据替换掉原来的内容

/*
以下为增加法，根据现有的模板不断将内容加在旧数据后面，用于加载内容，需要用到事件
*/
$(".testAdd").click(function(){
	var tpl = doT.template($("#testTpl").html());  //获取模板，这里的testTpl对应模板层
	$("#testCont").prepend(tpl(message));   //将数据用过模板得到的内容加在testCont里
});
//注：对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：
// var dataObj=eval("("+dataT+")");//转换为json对象
</script>
<!--数据层-->
</body>
</html>